<template>
    <div>
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/post' }">岗位管理</el-breadcrumb-item>
            <el-breadcrumb-item v-if="pageType==='add'">新增</el-breadcrumb-item>
            <el-breadcrumb-item v-if="pageType==='edit'">编辑</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form :model="ruleForm" :rules="rules" ref="ruleform" label-width="140px" class="demo-ruleForm">
            <el-form-item label="岗位名称：" prop="name" >
                <el-input v-model.trim="ruleForm.name" placeholder="请输入岗位名称"  maxlength="20" show-word-limit style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="业务线：" prop="line">
                <el-select v-model="ruleForm.line" filterable style="width: 400px;">
                    <el-option v-for="item in blinelist"
                               :key="item.id"
                               :label="item.label"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属部门：" prop="depart">
                <el-select v-model="ruleForm.depart" filterable style="width: 400px;">
                    <el-option v-for="item in dlist"
                               :key="item.id"
                               :label="item.label"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-row type="flex" justify="start">
                <el-form-item label="岗位权重范围：" prop="minnum">
                    <el-input type="number"  v-model="ruleForm.minnum"></el-input>
                </el-form-item>
                <span class="vline">————</span>
                <el-form-item label="" prop="maxnum" class="noleft">
                    <el-input type="number"  v-model="ruleForm.maxnum" style="width: 160px"></el-input>
                </el-form-item>
            </el-row>
            <el-form-item label="岗位标准权重：" prop="weight">
                <el-input v-model="ruleForm.weight" type="number" style="width: 400px;"></el-input>
                <span style="color:red;font-size: 12px;margin-left: 12px;">岗位标准权重需设置在权重范围内</span>
            </el-form-item>
            <el-form-item label="编制数量：" prop="number">
                <el-input v-model="ruleForm.number" placeholder="请输入编制数量" type="number" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="角色：" prop="role">
                <el-select v-model="ruleForm.role" filterable style="width: 400px;" filterable>
                    <el-option v-for="item in rolelist"
                               :key="item.id"
                               :label="item.label"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button style="margin-left: 100px;" type="primary" @click="savehander('ruleform')">保存</el-button>
                <el-button type="primary" @click="backhander">取消</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>


<script>
    import api from '@/api/apiPath'
    export default {
        data() {
            var checkweight = (rule, value, callback) => {
                let reg = /(^[0-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{1,2}$)/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正数，可保留两位小数'));
                } else {
                    callback();
                }
            }
            var checkmaxnum = (rule, value, callback) => {
                let reg = /(^[0-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{1,2}$)/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正数，可保留两位小数'));
                } else {
                    callback();
                }
            }
            var checkminmax = (rule, value, callback) => {
                let reg = /(^[0-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{1,2}$)/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正数，可保留两位小数'));
                } else {
                    callback();
                }
            }
            var checknumber = (rule, value, callback) => {
                let reg = /(^[1-9]\d*$)/
                 // let reg = /(^[1-9]{1}[0-9]*$)|(^[1-9]*\.[0-9]{1,2}$)/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正整数'))
                }
                else if (value > 1000) {
                    callback(new Error('编制数量不能大于1000'))
                } 
                else {
                    callback();
                }
            }
            return {
                pageType: '',//类型 编辑 新增
                ruleForm: {
                    name: undefined,
                    line: undefined,
                    depart: undefined,
                    weight: undefined,
                    maxnum: undefined,
                    minnum: undefined,
                    number: undefined,
                    role: undefined,
                },
                rules: {
                    name: [
                        {required: true, message: '请输入岗位名称', trigger: 'blur'}
                    ],
                    line: [
                        {required: true, message: '请选择业务线', trigger: 'blur'}
                    ],
                    depart: [
                        {required: true, message: '请选择部门', trigger: 'blur'}
                    ],
                    maxnum: [
                        {required: true, message: '请填写权重范围', trigger: 'blur'},
                        {validator: checkmaxnum, trigger: 'blur'}
                    ],
                    minnum: [
                        {required: true, message: '请填写权重范围', trigger: 'blur'},
                        {validator: checkminmax, trigger: 'blur'}
                    ],
                    weight: [
                        {required: true, message: '请填写岗位标准权重', trigger: 'blur'},
                        {validator: checkweight, trigger: 'blur'}
                    ],
                    number: [
                        {required: true, message: '请输入编制数量', trigger: 'blur'},
                        {validator: checknumber, trigger: 'blur'}
                    ],
                    role: [
                        {required: true, message: '请选择角色', trigger: 'blur'},
                    ]

                },
                rolelist: [],  // 角色
                blinelist: [], // 业务线
                dlist: []      // 部门
            }
        },
        methods: {
            backhander() {
                this.$router.push({path: '/post'})
            },
            savehander(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (+this.ruleForm.maxnum > 100 || +this.ruleForm.minnum > 100) {
                            this.$message({
                                message: '岗位权重范围不能大于100',
                                type: 'warning'
                            });
                            return false;
                        }

                        if (+this.ruleForm.maxnum < +this.ruleForm.minnum) {
                            this.$message({
                                message: '岗位权重范围最小值不能大于最大值',
                                type: 'warning'
                            });
                            return false;
                        }
                        if (+this.ruleForm.weight < +this.ruleForm.minnum || +this.ruleForm.weight > +this.ruleForm.maxnum) {
                            this.$message({
                                message: '岗位标准权重需设置在权重范围内',
                                type: 'warning'
                            });
                            return false;
                        }
                        this.submitRequest(this.ruleForm)
                    }
                });
            },

            submitRequest(params) {
                let url = api.addPost;
                if(this.pageType === 'edit'){
                    url = api.editPost;
                }
                this.axios.post(url, {
                    stationName: params.name,
                    compilationQuantity: params.number,
                    businessLineId: params.line,
                    departmentId: params.depart,
                    roleId: params.role,
                    weightOnLine: params.maxnum,
                    weightOffLine: params.minnum,
                    standardWeight: params.weight,
                    id: this.$route.query.id
                }).then((res) => {
                    if(res){
                        this.$message({
                            message: this.pageType === 'edit'? "修改成功": "新增成功",
                            type: 'success'
                        });
                        this.$router.push({path: '/post'})
                    }
                })
            },
            getAllBusinessLineList() {
                this.axios.post(api.getAllBusinessLineList, {}).then((res) => {
                    let blinelist = []
                    res.data.data.forEach((item) => {
                        blinelist.push({
                            id: item.id,
                            label: item.businessLineName
                        })
                    })
                    this.blinelist = blinelist;
                })
            },
            getAllDepartmentList() {
                this.axios.post(api.getAllDepartmentList, {}).then((res) => {
                    let dlist = []
                    res.data.data.forEach((item) => {
                        dlist.push({
                            id: item.id,
                            label: item.departmentName
                        })
                    })
                    this.dlist = dlist
                })
            },
            getAllEffectiveRole() {
                this.axios.post(api.getAllEffectiveRole, {}).then((res) => {
                    let rolelist = []
                    res.data.data.forEach((item) => {
                        rolelist.push({
                            id: item.id,
                            label: item.roleName
                        })
                    })
                    this.rolelist = rolelist
                })
            },
            getSinglePostById(id) {
                this.axios.post(api.getSinglePostById, {
                    id: id
                }).then((res) => {
                    let params = res.data.data;
                    this.ruleForm = {
                        name: params.stationName,
                        number: params.compilationQuantity,
                        line: params.businessLineId,
                        depart: params.departmentId,
                        role: params.roleId,
                        maxnum: params.weightOnLine,
                        minnum: params.weightOffLine,
                        weight: params.standardWeight
                    }
                })
            }
        },

        created() {
            this.pageType = this.$route.query.type;
            if (this.pageType === 'edit') {
                this.getSinglePostById(this.$route.query.id)
            }
            this.getAllBusinessLineList();
            this.getAllDepartmentList();
            this.getAllEffectiveRole();
        }

    }
</script>

<style lang="stylus">
    .vline {
        margin: 5px 10px;
        color: rgba(7, 17, 27, .5);
    }

    .noleft {
        .el-form-item__content {
            margin-left: 0 !important;
        }
    }


</style>